import {
  StarTwoTone,
  LikeOutlined,
  MessageFilled,
  PlusCircleOutlined,
  EyeOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {List, Tag, Affix, Button, Badge, Popconfirm, Row, Col} from 'antd';
import React, {useEffect} from 'react';
import { connect } from 'umi';
import ArticleListContent from '../ArticleListContent';
import styles from './index.less';
import { history } from '@@/core/history';
import * as echarts from 'echarts';

const Articles = (props) => {
  const { list, delBlog } = props;

  const getOption = item => {
    return {
      title: {},
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: item.title,
          type: 'pie',
          radius: '85%',
          selectedMode: 'single',
          data: [
            { value: item.starCount, name: '收藏' },
            { value: item.likeCount, name: '点赞' },
            { value: item.messageCount, name: '评论' },
            { value: item.views, name: '浏览' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            normal: {
              color: function (colors) {
                var colorList = [
                  '#389FFF',
                  'orangered',
                  'yellowgreen',
                  'lightblue'
                ];
                return colorList[colors.dataIndex];
              }
            },
          }
        }
      ]
    }
  }

  //react hook 页面渲染完后加载此方法
  useEffect(() => {
    list && list.length > 0 && list.map((item) => {
      let dom = document.getElementById('blog_' + item.id + '_chart');
      let chart = echarts.init(dom);
      let option = getOption(item);
      chart.setOption(option);
    })
  })

  const IconText = ({ icon, text }) => (
    <span style={{ display: 'inline-block' }}>
      {icon} {text}
    </span>
  );

  const toBlogInfo = (id) => {
    history.push('/blogInfo?id=' + id);
  };

  const toBlogEdit = () => {
    history.push('/blogEdit');
  };

  const deleteBlog = id => {
    delBlog(id);
  }

  return (
    <>
    <List
      size="large"
      className={styles.articleList}
      rowKey="id"
      itemLayout="vertical"
      dataSource={list}
      renderItem={(item) => (
        <List.Item
          key={item.id}
          actions={[
            <IconText
              key="like"
              icon={<LikeOutlined title='点赞' onClick={() => toBlogInfo(item.id)} style={{ color: 'orangered' }} />}
              text={item.likeCount}
            />,
            <IconText
              key="message"
              icon={
                <MessageFilled
                  title='评论'
                  onClick={() => toBlogInfo(item.id)}
                  style={{ cursor: 'pointer', color: 'yellowgreen' }}
                />
              }
              text={item.messageCount}
            />,
            <IconText key="star" icon={<StarTwoTone title='收藏' onClick={() => toBlogInfo(item.id)}/>} text={item.starCount} />,
            <IconText
              key="views"
              icon={
                <EyeOutlined
                  title='浏览'
                  style={{ cursor: 'pointer', color: 'lightblue' }}
                />
              }
              text={item.views}
            />,
            <Badge
              status={item.status == 1 ? 'processing' : (item.status == 2 ? 'success' : (item.status == 3 ? 'warning' : 'error'))}
              text={item.status == 1 ? '待审核' : (item.status == 2 ? '审核通过' : (item.status == 3 ? '审核不通过' : '已被封禁'))}
            />,
            <Popconfirm
              title='确定删除吗？'
              onConfirm={() => deleteBlog(item.id)}
            >
              <DeleteOutlined style={{ cursor: 'pointer' }}/>
            </Popconfirm>
          ]}
        >
          <List.Item.Meta
            title={
              <a className={styles.listItemMetaTitle} onClick={() => toBlogInfo(item.id)}>
                {item.title}
              </a>
            }
            description={
              <div>
                <Row>
                  <Col span={24}>
                    分类：
                    {item.type && item.type.split(',').map((val) => <Tag color="success">{val}</Tag>)}
                  </Col>
                </Row>
                <Row style={{ marginTop: '2%' }}>
                  <Col span={24}>
                    标签：
                    {item.label && item.label.split(',').map((val) => <Tag color="processing">{val}</Tag>)}
                  </Col>
                </Row>
              </div>
            }
          />
          <ArticleListContent data={item} />
          <div id={`blog_${item.id}_chart`} className={styles.blogCharts}></div>
        </List.Item>
      )}
    />
    <Affix offsetBottom={20}>
      <Button type='dashed' shape="round">
        <a style={{ color: 'orangered', lineHeight: '23px' }} onClick={toBlogEdit}><PlusCircleOutlined />&nbsp;新增博客</a>
      </Button>
    </Affix>
    </>
  );
};

export default connect(({ userCenter }) => ({
  list: userCenter.list
}))(Articles);
